/*
* @Author: hui
* @Date: 2019-06-06 21:53:55
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-11 20:27:40
*/
<template>
    <div>
        <div style="height: auto;width: 100%;width:87%;margin:0 auto;">
            <div style="margin-top: 2vw;">
                <p
                    style="margin-top:1.8vw;font-size:1.2vw;color: #7A7A7A;font-family: DengXian"
                >Message Box</p>
                <p
                    style="margin-top:0.1vw;font-size:2vw;color: #44519E;font-weight: bold;font-family: DengXian"
                >消息盒子</p>
                <div style="margin-top:0.6vw;width: 10vw;height: 0.2vw;background-color:#45529F"></div>
            </div>
            <div>
                <Row>
                    <i-col span="8">
                        <div
                            style="width:95%;background-color:#fff;box-shadow:rgba(0, 0, 0, 0.16) 8px 5px 6px;margin-top:1vw"
                        >
                            <!-- <div
                                v-bind:class="{ m_div: choose, m_div1: !choose}"
                                v-on:click="allClick"
                            >
                                <Row>
                                    <i-col span="7">
                                        <img class="m_img" src="../assets/002.jpg">
                                    </i-col>
                                    <i-col span="11">
                                        <p class="m_p1">全部消息</p>
                                        <p class="m_p2">
                                             <span>11</span>条消息
                                            <span>12</span>条未读 
                                        </p>
                                    </i-col>
                                    <i-col span="6" style="text-align:right;">
                                        <p class="m_p3">今天</p>
                                    </i-col>
                                </Row>
                            </div>-->

                            <div
                                v-bind:class="{ m_div: choose1, m_div1: !choose1}"
                                v-on:click="systemClick"
                            >
                                <Row>
                                    <i-col span="7">
                                        <img class="m_img" src="../assets/0461.png">
                                    </i-col>
                                    <i-col span="11">
                                        <p class="m_p1">系统消息</p>
                                        <p class="m_p2">
                                            <!-- <span>11</span>条消息
                                            <span>12</span>条未读-->
                                        </p>
                                    </i-col>
                                    <i-col span="6" style="text-align:right;">
                                        <p class="m_p3">今天</p>
                                    </i-col>
                                </Row>
                            </div>

                            <div
                                v-bind:class="{ m_div : choose2, m_div1: !choose2}"
                                v-on:click="friendClick"
                            >
                                <Row>
                                    <i-col span="7">
                                        <img class="m_img" src="../assets/friend.jpg">
                                    </i-col>
                                    <i-col span="11">
                                        <p class="m_p1">好友推荐</p>
                                        <p class="m_p2">
                                            <!-- <span>11</span>条消息
                                            <span>12</span>条未读-->
                                        </p>
                                    </i-col>
                                    <i-col span="6" style="text-align:right;">
                                        <p class="m_p3">今天</p>
                                    </i-col>
                                </Row>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="16">
                        <div class="contentMessage">
                            <!-- <div v-if="pannel==='allMessage'">
                                <allPage></allPage>
                            </div>-->
                            <div v-if="pannel==='systemMessage'">
                                <div v-if="messageNumber>0">
                                    <systemPage
                                        v-for="(message,index) in messageList"
                                        :message="message"
                                        :key="index"
                                    ></systemPage>
                                </div>
                                <div v-else style="font-size:1vw;text-align:center;margin-top:5vw"><img src="../assets/no-message.jpg" style="width:25vw" alt="没有任何信息"/></div>
                            </div>
                            <div v-else-if="pannel==='friendMessage'">
                                <friendPage
                                    v-for="(info,index) in recommandList"
                                    :personInfo="info"
                                    :key="index"
                                ></friendPage>
                            </div>
                        </div>
                    </i-col>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
import allPage from "./message/allMessage.vue";
import systemPage from "./message/systemMessage.vue";
import friendPage from "./message/friendMessage.vue";

export default {
  data() {
    return {
      choose1: false,
      choose2: true,
      pannel: "systemMessage",
      recommandList: [],
      messageList: []
    };
  },
  components: {
    systemPage,
    allPage,
    friendPage
  },
  created() {
    let _this = this;
    this.http.post(this, "/GetUserMessage").then(function(msg) {
      if (msg.data.code === "200") {
        if (msg.data.data !== "没有消息") {
          _this.messageList = msg.data.data;
        }
      }
    });
  },
  computed: {
    messageNumber() {
      return this.messageList.length;
    }
  },
  methods: {
    systemClick() {
      this.pannel = "systemMessage";
      this.choose1 = false;
      this.choose2 = true;
    },
    friendClick() {
      this.pannel = "friendMessage";
      this.choose1 = true;
      this.choose2 = false;
      let _this = this;
      this.http.post(this, "/recommandPerson").then(function(msg) {
        if (msg.data.code === "200") {
          _this.recommandList = msg.data.data;
        }
      });
    }
  }
};
</script>

<style scoped>
.m_div {
  background-color: #fff;
  height: 5vw;
  border-bottom: 1px solid #f1f1f3;
}
.m_div1 {
  background-color: #f5f6fa;
  height: 5vw;
  border-bottom: 1px solid #f1f1f3;
}
.m_img {
  width: 3.5vw;
  margin-top: 0.8vw;
  margin-left: 1.5vw;
  border-radius: 3vw;
  border: #2b85e4 2px solid;
}
.m_p1 {
  margin-top: 1vw;
  font-size: 0.9vw;
  font-weight: bold;
  font-family: DengXian;
}
.m_p2 {
  margin-top: 0.6vw;
  font-size: 0.5vw;
  font-family: DengXian;
}
.m_p3 {
  margin-right: 1vw;
  margin-top: 0.4vw;
  font-size: 0.2vw;
  font-family: DengXian;
}
.contentMessage {
  width: 45vw;
  min-height: 40vw;
  border: #e8e8e8 1px solid;
  box-shadow: rgba(0, 0, 0, 0.16) 8px 5px 6px;
  background-color: #ffffff;
  margin-top: 1vw;
}
</style>
